import 'package:flutter/material.dart';

/// 商品卡片Widget
/// 展示商品信息，包含图片、名称、价格和操作按钮
/// 使用Card、Stack、Positioned等Widget构建
class ProductCard extends StatelessWidget {
  /// 商品名称
  final String name;

  /// 商品价格
  final String price;

  /// 商品图片（这里使用emoji作为示例）
  final String image;

  /// 点击事件回调
  final VoidCallback onTap;

  const ProductCard({
    super.key,
    required this.name,
    required this.price,
    required this.image,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4, // 卡片阴影
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12), // 圆角边框
      ),
      child: InkWell(
        onTap: onTap, // 点击事件
        borderRadius: BorderRadius.circular(12), // 点击效果圆角
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
          children: [
            // 商品图片区域 - 使用Expanded控制比例
            Expanded(
              flex: 3, // 占据3份空间
              child: Container(
                width: double.infinity, // 占满宽度
                decoration: BoxDecoration(
                  color: Theme.of(
                    context,
                  ).colorScheme.primaryContainer, // 主题色容器
                  borderRadius: const BorderRadius.vertical(
                    top: Radius.circular(12), // 顶部圆角
                  ),
                ),
                child: Stack(
                  children: [
                    // 商品图片 - 居中显示
                    Center(
                      child: Text(
                        image,
                        style: const TextStyle(fontSize: 48), // 大号emoji
                      ),
                    ),
                    // 右上角标签 - 使用Positioned精确定位
                    Positioned(
                      top: 8,
                      right: 8,
                      child: Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: Theme.of(context).colorScheme.primary, // 主色调背景
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Text(
                          '热销',
                          style: TextStyle(
                            color: Theme.of(
                              context,
                            ).colorScheme.onPrimary, // 主色调上的文字颜色
                            fontSize: 10,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    // 左下角收藏按钮 - 使用Positioned定位
                    Positioned(
                      bottom: 8,
                      left: 8,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(0.9), // 半透明白色背景
                          shape: BoxShape.circle, // 圆形
                        ),
                        child: IconButton(
                          icon: const Icon(Icons.favorite_border, size: 20),
                          onPressed: () {}, // 收藏功能
                          color: Colors.grey[600], // 灰色图标
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // 商品信息区域 - 使用Expanded控制比例
            Expanded(
              flex: 2, // 占据2份空间
              child: Padding(
                padding: const EdgeInsets.all(12),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 商品名称
                    Text(
                      name,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        fontWeight: FontWeight.w600, // 半粗体
                      ),
                      maxLines: 2, // 最多2行
                      overflow: TextOverflow.ellipsis, // 超出显示省略号
                    ),
                    const SizedBox(height: 4),
                    // 商品价格
                    Text(
                      price,
                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                        color: Theme.of(context).colorScheme.primary, // 主色调
                        fontWeight: FontWeight.bold, // 粗体
                      ),
                    ),
                    const Spacer(), // 弹性空间，将按钮推到底部
                    // 购买按钮 - 占满宽度
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: onTap,
                        style: ElevatedButton.styleFrom(
                          padding: const EdgeInsets.symmetric(
                            vertical: 8,
                          ), // 垂直内边距
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8), // 圆角
                          ),
                        ),
                        child: const Text(
                          '立即购买',
                          style: TextStyle(fontSize: 12), // 小号字体
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
